<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.Vue监测数组改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue如何监测数组的改变？			
					通过包裹数组的7个变更方法实现，本质就是做了两件事：
							(1).调用原生对应的方法对数组进行更新。
							(2).重新解析模板，进而更新页面。
					备注：在Vue的世界里，修改数组中的某一项一定要用如下方法：
							push()、pop()、shift()、unshift()、splice()、sort()、reverse()
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<ul>
				<li v-for="c in cars" :key="c.id">
					{{c.name}} -- {{c.price}}
				</li>
			</ul>
			<button @click="changePrice">修改捷达的价格</button>
			<button @click="changeName">修改捷达的名字</button>
			<button @click="changeAll">修改整个捷达</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			let vm = new Vue({
				el:'#demo',
				data:{
					cars:[
						{id:'asdfbrtew',name:'捷达',price:'1W'},
						{id:'wer433454',name:'奥迪',price:'20W'},
						{id:'asdwqeeee',name:'迈巴赫',price:'100W'}
					]
				},
				methods:{
					changePrice(){
						this.cars[0].price = '1.2W'
					},
					changeName(){
						this.cars[0].name = '新捷达'
					},
					changeAll(){
						// this.cars[0] = {id:'i0909i09ia98',name:'jetta',price:'2W'}
						this.cars.splice(0,1,{id:'i0909i09ia98',name:'jetta',price:'2W'})
						// console.log(this.cars.splice === Array.prototype.splice)
					}
				}
			})
			console.log(vm)
		</script>
	</body>
</html>